<!DOCTYPE html>
<html>
<head>
    <title>Physical Pendulums</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="pendulumCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('pendulumCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw the pivot symbol (triangle)
        function drawPivot(x, y, size) {
            ctx.save();
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(x, y - size / 2);
            ctx.lineTo(x - size, y + size / 2);
            ctx.lineTo(x + size, y + size / 2);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }

        // --- Global Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw Diagram (a) ---
        const x_a = 160;
        const y_a_center = 200;
        const R_a = 80;
        const r_a = 70;

        // Draw annulus
        ctx.beginPath();
        ctx.arc(x_a, y_a_center, R_a, 0, 2 * Math.PI);
        ctx.moveTo(x_a + r_a, y_a_center);
        ctx.arc(x_a, y_a_center, r_a, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw pivot O
        const O_a_x = x_a;
        const O_a_y = y_a_center - R_a;
        drawPivot(O_a_x, O_a_y, 10);
        ctx.fillText('O', O_a_x, O_a_y - 20);

        // Draw center C
        ctx.beginPath();
        ctx.arc(x_a, y_a_center, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', x_a + 20, y_a_center);

        // Label (a)
        ctx.fillText('(a)', x_a, y_a_center + R_a + 30);

        // --- Draw Diagram (b) ---
        const x_b = 400;
        const y_b_C = 200; // y-coordinate of center C
        const R_b = 80;
        const r_b = 70;
        const O_b_y = y_b_C - R_b; // y-coordinate of pivot O'
        const angle_b = Math.PI / 3.5;

        // Draw arc of annulus
        const startAngle_b = Math.PI / 2 - angle_b;
        const endAngle_b = Math.PI / 2 + angle_b;

        ctx.beginPath();
        ctx.arc(x_b, y_b_C, R_b, startAngle_b, endAngle_b);
        ctx.lineTo(x_b + r_b * Math.cos(endAngle_b), y_b_C + r_b * Math.sin(endAngle_b));
        ctx.arc(x_b, y_b_C, r_b, endAngle_b, startAngle_b, true);
        ctx.closePath();
        ctx.stroke();

        // Draw pivot O'
        drawPivot(x_b, O_b_y, 10);
        ctx.fillText("O'", x_b, O_b_y - 20);

        // Draw center C
        ctx.beginPath();
        ctx.arc(x_b, y_b_C, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', x_b + 20, y_b_C);

        // Label (b)
        ctx.fillText('(b)', x_b, y_b_C + R_b/2 + 30);


        // --- Draw Diagram (c) ---
        const x_c = 640;
        const y_c_pivot = 120; // Pivot O''
        const R_c = 150;
        const r_c = 135;
        const angle_c = Math.PI / 7;

        const startAngle_c = Math.PI / 2 - angle_c;
        const endAngle_c = Math.PI / 2 + angle_c;

        // Draw sector of annulus
        ctx.beginPath();
        ctx.arc(x_c, y_c_pivot, R_c, startAngle_c, endAngle_c);
        ctx.lineTo(x_c + r_c * Math.cos(endAngle_c), y_c_pivot + r_c * Math.sin(endAngle_c));
        ctx.arc(x_c, y_c_pivot, r_c, endAngle_c, startAngle_c, true);
        ctx.closePath();
        ctx.stroke();

        // Label O''
        ctx.fillText('O"', x_c, y_c_pivot - 20);

        // Center of Mass C
        const C_c_y = y_c_pivot + 0.65 * R_c;
        ctx.beginPath();
        ctx.arc(x_c, C_c_y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', x_c - 20, C_c_y);

        // "悬线" (suspension line) details
        ctx.save();
        ctx.lineWidth = 1;

        // The two crossing lines inside the sector
        const pL1 = { x: x_c + (r_c + 35) * Math.cos(startAngle_c), y: y_c_pivot + (r_c + 35) * Math.sin(startAngle_c) };
        const pR1 = { x: x_c + (R_c - 15) * Math.cos(endAngle_c), y: y_c_pivot + (R_c - 15) * Math.sin(endAngle_c) };
        const pL2 = { x: x_c + (R_c - 35) * Math.cos(startAngle_c), y: y_c_pivot + (R_c - 35) * Math.sin(startAngle_c) };
        const pR2 = { x: x_c + (r_c + 15) * Math.cos(endAngle_c), y: y_c_pivot + (r_c + 15) * Math.sin(endAngle_c) };
        
        ctx.beginPath();
        ctx.moveTo(pL1.x, pL1.y); ctx.lineTo(pR1.x, pR1.y);
        ctx.moveTo(pL2.x, pL2.y); ctx.lineTo(pR2.x, pR2.y);
        ctx.stroke();

        // The leader lines pointing to the crossing lines
        const join_point = { x: x_c + 40, y: y_c_pivot + 80 };
        const point_on_line1 = { x: (pL1.x + pR1.x) / 2, y: (pL1.y + pR1.y) / 2 };
        const point_on_line2 = { x: (pL2.x + pR2.x) / 2, y: (pL2.y + pR2.y) / 2 };
        const text_pos = { x: x_c + 85, y: y_c_pivot + 50 };

        ctx.beginPath();
        ctx.moveTo(point_on_line1.x, point_on_line1.y); ctx.lineTo(join_point.x, join_point.y);
        ctx.moveTo(point_on_line2.x, point_on_line2.y); ctx.lineTo(join_point.x, join_point.y);
        ctx.lineTo(text_pos.x, text_pos.y);
        ctx.stroke();
        
        // The label text
        ctx.font = '20px "KaiTi", "SimSun", sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('悬线', text_pos.x + 5, text_pos.y);
        ctx.restore();

        // Label (c)
        ctx.fillText('(c)', x_c, y_c_pivot + R_c + 30);


        // --- Main Title ---
        ctx.font = '24px "KaiTi", "SimSun", sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('习题 10-12 图', canvas.width / 2, 400);

    </script>
</body>
</html>